<template>
	<div> 
	<div class="topbag">
		<div class="but">
			<van-button    v-show="show"  round  plain  type="danger" size="large" @click='goMember()'>登录</van-button>
		</div>
		<div class="top"  v-show="!show">
			<img :src="json.avatar" style="width: 80x; height: 70px;" />
			<div class="topRimg">
				<span class="da"><span class="xiao">用户名</span>{{json.nickname}}</span>
				<span  class="da"><span class="xiao">手机号</span>{{json.mobile}}</span>
			</div>
		</div>
	</div>
	
	<div class="ding">
		<span>我的订单</span>
		<span>查看全部订单></span>
	</div>
	
	<div class="yi">
		<van-grid  >
		  <van-grid-item style="flex-basis: 20%;" icon="card" text="代付款" />
		  <van-grid-item style="flex-basis: 20%;"icon="shop" text="待发货" />
		  <van-grid-item style="flex-basis: 20%;"icon="logistics" text="待收货" />
		  <van-grid-item style="flex-basis: 20%;"icon="orders-o" text="待评价" />
		   <van-grid-item style="flex-basis: 20%;" icon="service-o" text="退款/售后" />
		</van-grid>
	</div>
	
	<div style='padding: 0 10px 0;'>
		<van-cell-group>
		  <van-cell title="地址管理" is-link />
		    <van-cell title="我的收藏" is-link />
			  <van-cell title="足迹列表" is-link />
			    <van-cell title="意见反馈" is-link />
				  <van-cell title="关于我们" is-link />
		</van-cell-group>
	</div>
	<div style='padding: 20px;'>
		<van-button  v-show="!show"  round  color="#F688A4" type="primary" size="large" @click='doLogout()'>退出登录</van-button>
	</div>
	
	</div>
</template>

<script>
	import { Grid, GridItem,Icon,Cell,CellGroup,Button,Toast    } from 'vant';
	import API from '../utils/API.js'
	import {vuex} from '../store/store.js'
	export default {
	  data() {
	    return {
			json:{
				// avatar: "https://hopumall.oss-cn-beijing.aliyuncs.com/images/litemall/userAvatar/defultavator.jpeg",
				// nickname:'胖胖',
				// mobile:'123'

			},
	     show:true
	    };
	  },
	  components: {
	  	[Grid.name]: Grid,
		[GridItem.name]: GridItem,
		[Icon.name]: Icon,
		[Cell.name]: Cell,
		[CellGroup .name]: CellGroup ,
		[Button .name]: Button ,
	  
	  },
	  methods:{
		  doLogout(e){  //退出登录
		  localStorage.removeItem( 'token' )
		  localStorage.removeItem( 'userInfo' )
		  // 异步存储vuex
		   this.show=true;
		  this.$store.dispatch( 'logout' )
			  this.$post(API.POST_TOKEN)
			  .then(res => {//移除内存
			  })
			  .catch( err => {
				   console.log( err )
				   } )
		  },
		  goMember(){ //去登录
			  this.$router.push({path:'/member'})
		  }
	  },
	  created(){
		  let token =this.$store.state.token
		  this.$get(API.GET_FOOTPRINT_list,{ ////足迹列表
			  token:token,
		  })
		  .then(res => {
			  console.log(res.data.data.list)
		  })
		  
		 // console.log(this.$store.state.userInfo)
		  //取缓存 字符串
		  if(localStorage.getItem('userInfo') ==null){
			   this.show=true;
			   Toast('没有登录');
		  }else{
			  this.show=false;
			  let userInfo = JSON.parse(localStorage.getItem('userInfo'));
			  // //异步存储给vuex
			  // this.$store.dispatch('login', userInfo)
			   this.json = userInfo
			   // console.log(this.json)
					 
		  }
	
	  }
	};
</script>

<style>
	.da{
		font-size: 15px;
	}
	.but{
		width: 272px;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.xiao{
		font-size: 13px;
	}
	.topbag {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 130px;
		width: 377px;
		background-color:#F688A4;
	}
	.top{
		position: absolute;
		display: flex;
		align-items: center;
		padding-left: 12px;
		box-sizing: border-box;
		top: 10px;
		margin-top: 10px;
		border-radius: 15px;
		width: 352px;
		height: 120px;
		background-color: #FFFFFF;
		box-shadow:  4px 6px 5px #888;
	}
	.topRimg {
		display: flex;
		flex-direction: column;
		margin-left: 29px;
	}
	.topRimg span{
		padding: 4px 0;
	}
	.ding {
		
		display: flex;
		justify-content: space-between;
		margin-top: 25px;
		margin-bottom: 10px;
		padding: 0 10px;
		color: #98989F;
	}
	.ding span:nth-child(1){
		color: #101010;
	}
	.yi{
		width: 100%;
		height: 80px;
	}
</style>
